<template>
  <div class="app-container">
    <div class="main-box">
      <div class="title-box">
        <div class="title-msg">基础信息</div>
        <div class="edit-style">
          <!--          <el-button-->
          <!--            plain-->
          <!--            size="small"-->
          <!--            icon="el-icon-edit"-->
          <!--            type="primary"-->
          <!--            v-if="detailData.publishStatus == 2"-->
          <!--            @click="edit()"-->
          <!--            >修改</el-button-->
          <!--          >-->
        </div>
      </div>
      <div class="content-box" style="margin: 50px 0 0 270px;">
        <div class="box-item">
          <div style="display: flex; ">
            <span>产品图片：</span>

            <span class="img-box">
              <el-image
                style="width: 100px; height: 100px"
                :src="detailData.pic"
                :preview-src-list="[detailData.pic]"
              >
              </el-image>
            </span>
          </div>
        </div>
        <div class="box-item">
          <div>
            <span>产品名称：</span>
            <span>{{ detailData.name }}</span>
          </div>
          <div>
            <span>产品所属银行：</span>
            <span>{{ detailData.bankName }}</span>
          </div>
        </div>
        <div class="box-item">
          <div>
            <span>最大额度：</span>
            <span>{{ detailData.maxQuota }}万元</span>
          </div>
          <div>
            <span>年化利率：</span>
            <span
              >{{ detailData.minAnnualRate }}% -
              {{ detailData.maxAnnualRate }}%</span
            >
          </div>
        </div>
        <div class="box-item">
          <div>
            <span>年龄区间：</span>
            <span
              >{{ detailData.corporateAge }}岁 -
              {{ detailData.corporateMaxAge }}岁</span
            >
          </div>
          <div>
            <span>产品类型：</span>
            <span> {{ detailData.matchType.join(",") }}</span>
          </div>
        </div>
        <div class="box-item">
          <div>
            <span>借款期限：</span>
            <span>{{ detailData.loanTerm }}</span>
          </div>
          <div>
            <span>还款方式：</span>
            <span>{{ detailData.repaymentType.join(",") }}</span>
          </div>
        </div>
        <div class="box-item">
          <div>
            <span>产品优势：</span>
            <span>{{
              detailData.advantageData &&
                JSON.parse(detailData.advantageData).join(",")
            }}</span>
          </div>
          <div>
            <span>贷款分类：</span>
            <span>{{ detailData.loanType.join(",") }}</span>
          </div>
        </div>
      </div>

      <!--个人要求-->

      <div class="content-box ">
        <div
          class="box-item "
          v-for="(item, index) in balitj"
          :key="index"
          style="align-items: baseline"
        >
          <div
            v-if="item.value"
            class="title-msg1"
            style="width: 120px; text-align: left;"
          >
            {{ item.name }}
          </div>
          <div
            v-if="item.value"
            style="width: 90%; padding-right: 150px; max-height: 200px; overflow-y: auto; border: 1px solid #ccc; padding: 0 10px; border-radius: 4px"
            :style="{ 'line-height': index === 3 ? '40px' : '' }"
          >
            <p class="parsed-text" v-html="item.value"></p>
          </div>
        </div>
      </div>

      <div class="content-box">
        <div
          style="display: flex; margin-top: 20px; align-items: baseline"
          v-for="(item, index) in detailData.customRequireList"
        >
          <div class="title-msg1" style="width: 120px; text-align: left;">
            {{ item.title }}
          </div>
          <div
            v-if="item.content"
            style="width: 90%; padding-right: 150px; max-height: 200px; overflow-y: auto; border: 1px solid #ccc; padding: 0 10px; border-radius: 4px"
            :style="{ 'line-height': index === 3 ? '40px' : '' }"
          >
            <p class="parsed-text" v-html="item.content"></p>
          </div>
        </div>
      </div>
      <!--个人要求-->
      <!-- <div class="title-box">
        <div class="title-msg">个人要求</div>
      </div>
      <div class="content-box">
        <div
          class="box-item"
          v-for="(item, index) in personalRequire"
          :key="index"
          style="align-items: baseline"
        >
          <div style="width: auto">{{ item.name }}</div>
          <div
            style="width: auto"
            :style="{ 'line-height': index === 3 ? '40px' : '' }"
          >
            <p class="parsed-text" v-html="item.value"></p>
          </div>
        </div>
      </div> -->

      <!--企业要求-->
      <!-- <div>
        <div class="title-box">
          <div class="title-msg">企业要求</div>
        </div>
        <div class="content-box">
          <div
            class="box-item"
            v-for="(item, index) in companyDetail"
            :key="index"
            style="align-items: baseline"
          >
            <div style="width: auto">{{ item.companyCreate }}</div>
            <div
              style="width: auto; white-space: pre-wrap"
              :style="{ 'line-height': index === 4 ? '30px' : '' }"
            >
              <p class="parsed-text" v-html="item.value"></p>
            </div>
          </div>
        </div>
      </div> -->
      <!--征信要求-->
      <!-- <div>
        <div class="title-box">
          <div class="title-msg">征信要求：</div>
        </div>
        <div class="content-box">
          <div class="box-item" style="align-items: baseline">
            <div style="width: auto">征信要求：</div>

            <div style="width: auto; line-height: 30px">
              <p class="parsed-text" v-html="detailData.creditRequire"></p>
            </div>
          </div>
        </div>
      </div> -->
      <!--准入地区-->
      <div>
        <div class="content-box">
          <div class="box-item" style="align-items: baseline">
            <div class="title-msg1" style="width: 120px ; text-align: left;">
              准入地区：
            </div>
            <div
              style="width: 90%; max-height: 200px; overflow-y: auto; display: block ;border: 1px solid #ccc; padding: 0 10px; border-radius: 4px"
              v-if="detailData.accessAreaType == 2"
            >
              <div
                style=" padding: 15px 0; display: block; color: #9E9E9E;"
                v-for="(item, idx) in detailData.treeSelect"
                :key="idx"
              >
                <div style="display: flex">
                  <div
                    style="margin-right: 20px; white-space: nowrap; font-size: 14px"
                  >
                    {{ item.label }}
                  </div>

                  <div
                    style="display: inline-block;color: #222; font-size: 14px"
                    v-if="item.children"
                  >
                    {{ item.children.map(item => item.label).join(" 、") }}
                  </div>
                </div>
              </div>
            </div>
            <div
              style="width: 90%; max-height: 200px; overflow-y: auto; display: block ;border: 1px solid #ccc; padding: 15px 10px; border-radius: 4px"
              v-else
            >
              全国
            </div>
          </div>
        </div>
      </div>
      <div v-if="detailData.accessIndustry">
        <div class="content-box">
          <div class="box-item" style="align-items: baseline">
            <div class="title-msg1" style="width: 120px ; text-align: left; ">
              准入行业：
            </div>

            <div
              style="width: 90%; max-height: 200px; overflow-y: auto; padding-right: 150px;border: 1px solid #ccc;  border-radius: 4px; padding: 0 10px;"
            >
              <p class="parsed-text" v-html="detailData.accessIndustry"></p>
            </div>
          </div>
        </div>
      </div>
      <div v-if="detailData.forbidIndustryList.length > 0">
        <div class="content-box">
          <div class="box-item" style="align-items: baseline">
            <div class="title-msg1" style="width: 120px ; text-align: left; ">
              禁入行业：
            </div>

            <div
              style="width: 90%; max-height: 200px; overflow-y: auto; display: ruby ;border: 1px solid #ccc; padding: 0 10px; border-radius: 4px"
            >
              <div
                style=" padding: 15px 0; color: #9E9E9E;"
                v-for="(item, idx) in detailData.forbidIndustryList"
                :key="idx"
              >
                <div style="color: #222; font-size: 14px">{{ item.industryName }}、 </div>
              </div>
            </div>
            <!--<div-->
            <!--  style="width: 90%; max-height: 200px; overflow-y: auto; padding-right: 150px;border: 1px solid #ccc;  border-radius: 4px; padding: 0 10px;"-->
            <!--&gt;-->
            <!--  <p class="parsed-text" v-html="detailData.prohibitIndustry"></p>-->
            <!--</div>-->
          </div>
        </div>
      </div>
      <div v-if="detailData.applyDesc">
        <div class="content-box">
          <div class="box-item" style="align-items: baseline">
            <div class="title-msg1" style="width: 120px ; text-align: left; ">
              申请流程：
            </div>

            <div
              style="width: 90%; max-height: 800px; overflow-y: auto; padding-right: 150px;border: 1px solid #ccc;  border-radius: 4px; padding: 0 10px;"
            >
              <p v-html="detailData.applyDesc"></p>
            </div>
          </div>
        </div>
      </div>
      <!--所需资料-->
      <!-- <div>
        <div class="title-box">
          <div class="title-msg">所需材料</div>
        </div>
        <div class="content-box">
          <div class="box-item" style="align-items: baseline">
            <div style="width: auto">所需材料：</div>

            <div style="width: auto; line-height: 30px">
              <p class="parsed-text" v-html="detailData.requiredMaterials"></p>
            </div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import { getProductDetail } from "@/api/product";
import { getBankList } from "@/api/system";
export default {
  data() {
    return {
      companyDetail: [
        {
          companyCreate: "企业成立时长：",
          value: "",
          key: "companyCreateTime"
        },
        { companyCreate: "企业纳税评级：", value: "", key: "companyTaxRating" },
        { companyCreate: "纳税状态：", value: "", key: "companyTaxStatus" },
        {
          companyCreate: "开票要求：",
          value: "",
          key: "companyReceiptRequire"
        },
        { companyCreate: "申请要求：", value: "", key: "companyApplyRequire" }
      ],
      personalRequire: [
        { name: "法人年龄：", value: "", key: "corporateAge" },
        { name: "法人变更时长：", value: "", key: "corporateChangeTime" },
        { name: "法人持股比例：", value: "", key: "corporateSharesRatio" },
        { name: "个人要求：", value: "", key: "corporateRequire" }
      ],
      balitj: [
        { name: "个人要求：", value: "", key: "legalApplyRequire" },
        { name: "企业要求：", value: "", key: "companyTaxInfo" },
        { name: "征信要求：", value: "", key: "creditRequire" }
      ],
      matchTypeList: [],
      texRequire: [],
      detailData: {}
    };
  },
  async created() {
    await this.getDetail();
    await this.getBankList();
  },
  filters: {},
  methods: {
    edit() {
      this.$router.push({
        path: "/creatProduct",
        query: {
          id: Number(this.detailData.id)
        }
      });
    },
    getBankList() {
      getBankList().then(res => {
        if (res.code === 200) {
          this.bankList = res.data;
        }
      });
    },
    getDetail() {
      getProductDetail(this.$route.query.id)
        .then(async res => {
          if (res.code === 200) {
            res.data.matchType = await this.$dictTypeFun(
              res.data.matchType,
              "match_type"
            );
            res.data.repaymentType = await this.$dictTypeFun(
              res.data.repaymentType,
              "repayment_type"
            );

            res.data.loanType = await this.$dictTypeFun(
              res.data.loanType + "",
              "product_cid"
            );

            res.data.bankName = this.bankList.find(
              v => v.id == res.data.bankId
            ).name;

            res.data.loanTerm = res.data.loanTerm
              .split(",")
              .map(v => {
                return v + "期";
              })
              .join(" 、");

            this.detailData = res.data;
            this.companyDetail.forEach(item => {
              Object.keys(this.detailData).forEach(v => {
                if (v == item.key) {
                  item.value = this.detailData[v];
                }
              });
            });
            this.personalRequire.forEach(item => {
              Object.keys(this.detailData).forEach(v => {
                if (v == item.key) {
                  item.value = this.detailData[v];
                }
              });
            });
            this.balitj.forEach(item => {
              Object.keys(this.detailData).forEach(v => {
                if (v == item.key) {
                  item.value = this.detailData[v];
                }
              });
            });
          }
        })
        .finally(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.edit-style {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translate(0, -50%);
  padding-left: 8px;
}
.parsed-text {
  white-space: pre-line; /* 保留换行 */
  line-height: 26px;
  letter-spacing: 1px;
  font-size: 14px;
}
.title-msg1 {
  transform: translateY(-50%);
  border-left: 3px solid #419eff;
  padding-left: 5px;
  font-size: 16px;
  font-weight: bold;
}
.app-container {
  height: calc(100vh - 50px);
  background-color: #f5f5f5;
  position: relative;
  .main-box {
    background-color: #fff;
    //height: 800px;
    padding-bottom: 40px;
    .title-box {
      width: 100%;
      font-size: 16px;
      font-weight: bold;
      height: 50px;
      border-bottom: 1px solid #eee;
      position: relative;
      .title-msg {
        position: absolute;
        left: 150px;
        top: 50%;
        transform: translate(0, -50%);
        border-left: 3px solid #419eff;
        padding-left: 8px;
      }
    }
    .content-box {
      margin: 20px 0 0 150px;
      .box-item {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        color: #222;
        font-size: 14px;
        > div {
          width: 28%;
          display: flex;
          // min-width: 300px;
          > span {
            //display: inline-block;

            &:nth-child(1) {
              white-space: nowrap;
              display: inline-block;
              width: auto;
              //min-width: 200px;
              text-align: right;
            }
            &:nth-child(2) {
              display: inline-block;
              width: auto;
              max-width: 400px;
              min-width: 300px;
              //text-align: left;
            }
          }
          .img-box {
            width: 90px;
            height: 90px;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}
// ::v-deep textarea[disabled],textarea:disabled,textarea.disabled {
//     background-color:#fff !important;
// }
</style>
